<template>
  <div class="wal-personal">
    <div class="payWay-header">
      <img :src="imgUrl.list1" v-if="audit !== 1" alt srcset @click="$back()" />
      <div v-else></div>
      <div>个人信息填写</div>
      <div></div>
    </div>
    <div
      class="list-sty"
      v-for="(item, index) in inforData"
      :key="index"
      @click="showSty(index)"
    >
      <!-- 头像 -->
      <div v-if="index == 0" class="list-header">
        <div>
          {{ item.text }}
          <span>*</span>
        </div>
        <label for="uploadFile">
          <img v-if="!file" :src="item.imgSrc" alt srcset />
          <img v-else :src="$photo + file" alt srcset />
          <input
            style="display:none"
            type="file"
            name="file"
            id="uploadFile"
            @change="uploadPhoto($event)"
          />
        </label>
      </div>
      <!-- 性别 -->
      <div v-if="index == 3" class="list-sexH">
        <div>
          {{ item.text }}
          <span>*</span>
        </div>
        <div>
          <div>
            <input
              type="radio"
              checked
              v-model="bgData.sex"
              name="user-sex"
              id="user-male"
              value="1"
            />
            <label for="user-male">男</label>
            <input
              style="margin-left:10px;"
              type="radio"
              value="2"
              name="user-sex"
              id="user-female"
              v-model="bgData.sex"
            />
            <label style="margin-right:10px;" for="user-female">女</label>
          </div>
        </div>
      </div>
      <!-- 城市 -->
      <div v-if="index == 4" class="list-city">
        <div>
          {{ item.text }}
          <span>*</span>
        </div>
        <div>
          {{ showCity.showCity_sA }} {{ showCity.showCity_sB }}
          {{ showCity.showCity_sC }}
          <img
            :src="item.imgSrc"
            alt
            srcset
            v-if="showCity.showCity_sA == ''"
          />
        </div>
      </div>
      <!-- 学历 -->
      <div v-if="index == 5" class="list-stu">
        <div>
          {{ item.text }}
          <span>*</span>
        </div>
        <div>
          {{ showStu }}
          <img :src="item.imgSrc" alt srcset v-if="showStu == ''" />
        </div>
      </div>
      <!-- 婚姻状况 -->
      <div v-if="index == 10" class="list-stu">
        <div>
          {{ item.text }}
          <span>*</span>
        </div>
        <div>
          {{ marriage }}
          <img :src="item.imgSrc" alt srcset v-if="marriage == ''" />
        </div>
      </div>
      <!-- 其他 -->
      <div
        v-if="
          index != 5 &&
            index != 4 &&
            index != 3 &&
            index != 0 &&
            index != 11 &&
            index != 12 &&
            index != 10
        "
        class="list-other"
      >
        <div>
          {{ item.text }}
          <span v-if="index != 11">*</span>
        </div>
        <input
          type="text"
          :placeholder="item.placeHolderTS"
          v-if="index == 1"
          v-model="bgData.name"
        />
        <input
          type="number"
          :placeholder="item.placeHolderTS"
          v-if="index == 2"
          v-model="bgData.age"
        />
        <input
          type="number"
          :placeholder="item.placeHolderTS"
          v-if="index == 6"
          v-model="bgData.phone"
        />
        <input
          type="text"
          :placeholder="item.placeHolderTS"
          v-if="index == 7"
          v-model="bgData.work"
        />
        <input
          type="number"
          :placeholder="item.placeHolderTS"
          v-if="index == 8"
          v-model="bgData.height"
        />
        <input
          type="number"
          :placeholder="item.placeHolderTS"
          v-if="index == 9"
          v-model="bgData.weight"
        />
      </div>
      <!-- 爱好 -->
      <div v-if="index == 11" class="likeGood">
        <div>
          {{ item.text }}
          <span style="color:red;">*</span>
        </div>
        <div class="label">
          <div
            v-for="(list, key) in item.label"
            :key="key"
            @click="insertLabel(key, item.label)"
          >
            {{ list }}
            <img
              v-if="key !== item.label.length - 1"
              :src="imgUrl.imgurl11"
              class="xshx"
              @click.stop="delhobby(key)"
            />
          </div>
        </div>
      </div>
      <!-- 个人简介 -->
      <div class="personalJJ" v-if="index == 12">
        <div>{{ item.text }}</div>
        <textarea
          placeholder="添加对自己的描述，让更多的人了解你~"
          v-model="bgData.introduced"
        ></textarea>
      </div>
    </div>
    <!-- 底部 -->

    <div class="list-finsh" @click="subtn()">完成</div>
    <!--城市  -->
    <awesome-picker
      ref="picker-city"
      :data="pickerCity.data"
      :anchor="pickerCity.anchor"
      :textTitle="pickerCity.textTitle"
      @confirm="handlePickerConfirmCity"
    ></awesome-picker>
    <!-- 学历 -->
    <awesome-picker
      ref="picker-edu"
      :data="pickerEdu.data"
      :anchor="pickerEdu.anchor"
      :textTitle="pickerEdu.textTitle"
      @confirm="handlePickerConfirmEdu"
    ></awesome-picker>
    <!-- 婚姻状况 -->
    <awesome-picker
      ref="picker-marriage"
      :data="pickerMarriage.data"
      :anchor="pickerMarriage.anchor"
      :textTitle="pickerMarriage.textTitle"
      @confirm="handlePickerConfirmMarriage"
    ></awesome-picker>
    <!-- 爱好标签添加窗口 -->
    <div
      class="likeGood_insert"
      v-if="showLikeGoods"
      @click="showLikeGoods = !showLikeGoods"
    >
      <div class="likeGood_insert_kuang" @click.stop>
        <div>请输入爱好</div>
        <input
          type="text"
          name="labelName"
          placeholder="请输入爱好"
          v-model="labelNameIn"
        />
        <div @click="insertLabelqr()">确定</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgUrl: {
        list1: require('../../../static/images/insert/Back.png'),
        list4: require('../../../static/images/insert/select.png'),
        list5: require('../../../static/images/insert/noSelect.png'),
        imgurl11: require('../../../static/images/insert/x.png')
      },
      inforData: [
        {
          text: '头像',
          imgSrc: require('../../../static/images/insert/xiangjio.png')
        },
        { text: '昵称', placeHolderTS: '请输入自己的昵称' },
        { text: '年龄', placeHolderTS: '请输入自己的年龄' },
        { text: '性别', text1: '男', text2: '女' },
        {
          text: '城市 ',
          imgSrc: require('../../../static/images/insert/rightpng.png')
        },
        {
          text: '学历',
          imgSrc: require('../../../static/images/insert/rightpng.png')
        },
        { text: '电话', placeHolderTS: '请输入电话' },
        { text: '职业', placeHolderTS: '请输入职业' },
        { text: '身高', placeHolderTS: '请输入身高,单位cm(厘米)' },
        { text: '体重', placeHolderTS: '请输入体重KG(千克)' },
        {
          text: '婚姻状况',
          imgSrc: require('../../../static/images/insert/rightpng.png')
        },
        {
          text: '爱好',
          label: [
            '人文艺术 演员 ',
            '铲屎官 超级宠猫咪',
            '专科 演员',
            '爱喝酒',
            '点击添加新标签'
          ]
        },
        {
          text: '个人简介',
          label: [
            '人文艺术 演员 ',
            '铲屎官 超级宠猫咪',
            '专科 演员',
            '爱喝酒',
            '点击添加新标签'
          ]
        }
      ],
      //性别
      sexStart: true,
      // 城市数据
      pickerCity: {
        data: this.$areaData,
        anchor: [],
        textTitle: '请选择城市'
      },
      // 婚姻状况
      pickerMarriage: {
        data: [],
        anchor: [],
        textTitle: '请选择婚姻状况'
      },
      // 学历
      pickerEdu: {
        data: [['大专', '本科']],
        anchor: [],
        textTitle: '请选择学历'
      },
      // 爱好标签弹框显示
      showLikeGoods: false,
      // 获取到的标签名
      labelNameIn: '',
      // 城市显示
      showCity: {
        showCity_sA: '',
        showCity_sB: '',
        showCity_sC: ''
      },
      //城市id
      city_A: '',
      city_B: '',
      city_C: '',
      // marriage
      marriage: '',
      // 学历显示
      showStu: '',
      //婚姻id
      marr_id: '',
      // 学历id
      edu_id: '',
      bgData: [],
      file: '',
      audit: null
    }
  },
  methods: {
    subtn() {
      let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
      if (this.bgData.phone == '') {
        alert('手机号不能为空！')
        return false
      }
      if (!reg.test(this.bgData.phone)) {
        alert('请填写正确的手机号码')
        return false
      }
      if (this.bgData.name == '') {
        alert('昵称不能为空！')
        return false
      }
      if (this.bgData.age == '') {
        alert('年龄不能为空！')
        return false
      }
      if (this.bgData.age > 60) {
        alert('年龄不能大于60！')
        return false
      }
      if (!/^[0-9]+$/.test(this.bgData.age)) {
        alert('年龄格式错误！')
        return false
      }
      if (this.bgData.work == '') {
        alert('职业不能为空！')
        return false
      }
      if (this.bgData.height == '') {
        alert('身高不能为空！')
        return false
      }
      if (this.bgData.height < 0 || this.bgData.height == 0) {
        alert('请填写正确的身高！')
        return false
      }
      if (this.bgData.weight == '') {
        alert('体重不能为空！')
        return false
      }
      if (this.bgData.weight < 0 || this.bgData.weight == 0) {
        alert('请填写正确的体重！')
        return false
      }
      //爱好
      if (this.inforData[11].label[0] == '点击添加新爱好') {
        alert('爱好不能为空！')
        return false
      }
      if (this.showCity.showCity_sA == '') {
        alert('城市不能为空！')
        return false
      }
      if (this.edu_id == '') {
        alert('学历不能为空！')
        return false
      }
      if (this.marr_id == '') {
        alert('婚姻不能为空！')
        return false
      }
      this.$axios({
        method: 'post',
        url: 'Needloginaction/PersonalEdit',
        data: {
          token: sessionStorage.token,
          name: this.bgData.name,
          age: this.bgData.age,
          sex: this.bgData.sex,
          edu_id: this.edu_id,
          marry_id: this.marr_id,
          province_id: this.city_A,
          city_id: this.city_B,
          district_id: this.city_C,
          address:
            this.showCity.showCity_sA +
            ' ' +
            this.showCity.showCity_sB +
            ' ' +
            this.showCity.showCity_sC,
          work: this.bgData.work,
          height: this.bgData.height,
          weight: this.bgData.weight,
          hobby: this.inforData[11].label,
          introduced: this.bgData.introduced,
          pic_id: this.file
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            alert(res.data.msg)
            this.$jump('/personal')
          } else {
            alert(res.data.msg)
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    uploadPhoto(event) {
      let file = event.target.files[0]
      let param = new FormData() //创建form对象
      param.append('image', file) //通过append向form对象添加数据
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      } //添加请求头
      this.$axios
        .post('Flink/uploads', param, config)
        .then(response => {
          if (response.data.code === 200) {
            let url = response.data.data
            this.file = url
          } else {
            alert(response.data.msg)
          }
        })
        .catch(err => {
          alert(err)
        })
    },
    sexBtn() {
      this.sexStart = !this.sexStart
    },
    showSty(ind) {
      switch (ind) {
        case 4:
          this.$refs['picker-city'].show()
          break
        case 5:
          this.$refs['picker-edu'].show()
          break
        case 10:
          this.$refs['picker-marriage'].show()
          break
      }
    },
    // 城市
    handlePickerConfirmCity(ret) {
      // console.log('ret', ret)
      // console.log(this.$areaData)
      this.showCity.showCity_sA = ret[0].value
      this.showCity.showCity_sB = ret[1].value
      this.showCity.showCity_sC = ret[2].value
      this.city_A = this.$areaData[ret[0].index].id
      this.city_B = this.$areaData[ret[0].index].children[ret[1].index].id
      this.city_C = this.$areaData[ret[0].index].children[
        ret[1].index
      ].children[ret[2].index].id
      // console.log(this.city_A)
      // console.log(this.city_B)
      // console.log(this.city_C)
    },
    // 婚姻状况
    handlePickerConfirmMarriage(ret) {
      // console.log('ret', ret)
      this.marriage = ret[0].value
      this.marr_id = this.bgData.marr[ret[0].index].id
    },
    // 学历
    handlePickerConfirmEdu(ret) {
      // console.log('ret', ret)
      this.showStu = ret[0].value
      this.edu_id = this.bgData.edu[ret[0].index].id
    },
    // 添加爱好标签
    insertLabel(indexs, labelArr) {
      if (indexs == labelArr.length - 1) {
        this.showLikeGoods = true
      }
    },
    // 确认添加标签
    insertLabelqr() {
      if (!this.labelNameIn) {
        this.showLikeGoods = !this.showLikeGoods
        return false
      }
      this.inforData[11].label[
        this.inforData[11].label.length - 1
      ] = this.labelNameIn
      this.inforData[11].label.push('点击添加新爱好')
      this.labelNameIn = ''
      this.showLikeGoods = !this.showLikeGoods
    },
    // 删除爱好标签
    delhobby(index) {
      this.inforData[11].label.splice(index, 1)
    }
  },
  created() {
    this.audit = this.$route.params.audit
      ? this.$route.params.audit
      : this.audit
    console.log(this.audit)
    this.$axios({
      method: 'post',
      url: 'Needloginaction/personalEditDetails',
      data: {
        token: sessionStorage.token
      }
    })
      .then(res => {
        if (res.data.code == 200) {
          this.bgData = res.data.data
          this.file = this.bgData.pic_id
          //爱好
          this.bgData.hobby.push('点击添加新爱好')
          this.inforData[11].label = this.bgData.hobby
          this.pickerMarriage.data = this.bgData.marr
          this.pickerEdu.data = this.bgData.edu
          // 默认婚姻
          if (this.bgData.marry_id !== null) {
            this.marriage = this.bgData.marr.find(
              item => item.id == this.bgData.marry_id
            ).value
          }
          // 默认学历
          if (this.bgData.edu_id !== null) {
            this.showStu = this.bgData.edu.find(
              item => item.id == this.bgData.edu_id
            ).value
          }
          //婚姻id
          this.marr_id = this.bgData.marry_id
          // 学历id
          this.edu_id = this.bgData.edu_id
          //三级联动
          this.showCity.showCity_sA = this.bgData.address[0]
          this.showCity.showCity_sB = this.bgData.address[1]
          this.showCity.showCity_sC = this.bgData.address[2]
          this.city_A = this.bgData.province_id
          this.city_B = this.bgData.city_id
          this.city_C = this.bgData.district_id
        } else {
          alert(res.data.msg)
        }
      })
      .catch(err => {
        alert(err)
      })
  }
}
</script>
<style lang="scss" scoped>
.wal-personal {
  padding-bottom: 0.67rem;
  box-sizing: border-box;
}

input[type='text'] {
  text-align: right;
  background: none;
}
input[type='number'] {
  text-align: right;
  background: none;
}
input[name='labelName'] {
  text-align: left !important;
  background: none;
}
input[type='radio'] {
  width: 0;
  opacity: 0;
}
input[type='radio'] + label::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0.466rem;
  height: 0.466rem;
  margin: 0.35em;
  border-radius: 0.1rem;
  border: 2px solid #a1a1a1;
}
input[type='radio']:checked + label::before {
  content: '✔';
  text-align: center;
  line-height: 0.45rem;
  color: #000;
  border: 2px solid #000;
  background-clip: content-box;
}

.wal-personal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  & > .payWay-header {
    width: 100%;
    height: 1.36rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    & > img {
      margin-left: 0.32rem;
      width: 0.32rem;
      height: 0.46rem;
    }
    & > div {
      font-size: 0.44rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #303030;
    }
  }
  & > .list-sty {
    width: 9.013333rem;
    min-height: 1.173333rem;
    border-bottom: 1px solid #e2e2e2;
    & > div {
      min-height: 1.173333rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      & > div:nth-child(1) {
        font-size: 0.4rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #303030;
        & > span {
          color: red;
        }
      }
    }
    & > .list-header {
      img {
        display: inline-block;
        background-color: pink;
        width: 1.06rem;
        height: 1.06rem;
        border-radius: 50%;
      }
    }
    & > .list-sexH {
      & > div:nth-child(2) {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        & > div {
          margin: 0 0.24rem;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          & > img {
            margin: 0 0.16rem;
            width: 0.466667rem;
            height: 0.466667rem;
          }
        }
      }
    }
    & > .list-city {
      & > div {
        & > img {
          width: 0.24rem;
          height: 0.386667rem;
        }
      }
    }
    & > .list-stu {
      div {
        & > img {
          width: 0.24rem;
          height: 0.386667rem;
        }
      }
    }
    & > .likeGood {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      & > div:nth-child(1) {
        margin-top: 0.32rem;
      }
      & > .label {
        margin: 0.16rem 0 0.32rem 0;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        & > div {
          position: relative;
          margin-right: 0.32rem;
          margin-top: 0.26rem;
          padding: 0.126667rem 0.16rem;
          border-radius: 0.16rem;
          border: solid 1px #a0a0a0;
          opacity: 0.52;
          & > .xshx {
            width: 0.45rem;
            height: 0.45rem;
            position: absolute;
            top: -0.269rem;
            right: -0.32rem;
          }
        }
      }
    }
    & > .personalJJ {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding-bottom: 0.16rem;
      & > div {
        margin: 0.16rem 0;
        font-size: 0.405733rem;
        font-weight: bold;
        font-stretch: normal;
        line-height: 0.666667rem;
        letter-spacing: 0rem;
        color: #303030;
      }
      & > textarea {
        margin: 0 auto;
        width: 8.533333rem;
        height: 2.653333rem;
        background-color: #e0e0e0;
        border-radius: 0.16rem;
        opacity: 0.52;
        padding: 0.16rem;
      }
    }
  }
  & > .list-finsh {
    margin-top: 0.64rem;
    width: 8.533333rem;
    height: 0.813333rem;
    background-color: #323232;
    border-radius: 0.386667rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 0.44rem;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0rem;
    color: #ffffff;
  }
  // 爱好标签添加窗口
  & > .likeGood_insert {
    position: fixed;
    z-index: 5;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    & > .likeGood_insert_kuang {
      width: 7.826667rem;
      height: 4.986667rem;
      background-color: #ffffff;
      border-radius: 0.2rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      & > div:nth-child(1) {
        width: 6.626667rem;
        height: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 0.4444rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #303030;
      }
      & > input {
        width: 6.026667rem;
        height: 1rem;
        background-color: #e0e0e0;
        border-radius: 0.066667rem;
      }
      & > div:nth-child(3) {
        width: 6.626667rem;
        height: 1rem;
        background-color: #323232;
        border-radius: 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 0.4444rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #ffffff;
      }
    }
  }
}
</style>
